<template>
  <div class="app-container">
    <el-card class="">
      <el-table stripe border :data="tableData" v-loading="loading">
        <el-table-column width="100" prop="server_name" label="服务名称" />
        <el-table-column width="100" prop="is_error" label="是否可用">
          <template slot-scope="{ row }">
            <el-tag :type="row.is_error === 1 ? 'danger' : 'success'">{{
              row.is_error === 1 ? "不可用" : "可用"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="100" prop="right_percent" label="可用率">
          <template slot-scope="{ row }">
            <span>{{ row.right_percent * 1e2 }} %</span>
          </template>
        </el-table-column>
        <el-table-column
          width="120"
          prop="average_cost_time"
          label="平均响应时间"
        >
          <template slot-scope="{ row }">
            <span>{{ row.average_cost_time }} 毫秒</span>
          </template>
        </el-table-column>
        <el-table-column prop="last_error" label="最近一次告警信息">
          <template slot-scope="{ row }">
            <json-viewer
              v-if="isEmpty(row.last_error)"
              :value="row.last_error"
              :expand-depth="1"
            ></json-viewer>
          </template>
        </el-table-column>
        <el-table-column width="160" prop="is_close" label="短信服务">
          <template slot-scope="{ row }">
            <el-tag :type="row.is_close === 0 ? 'success' : 'danger'">{{
              row.is_close === 0 ? "开启" : "关闭"
            }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column width="300" prop="" label="操作">
          <template slot-scope="{ row }">
            <el-button
              size="mini"
              :type="row.is_close === 0 ? 'info' : 'success'"
              @click="deBounceWrap(handleSwitchChange, row)"
            >
              {{ row.is_close === 0 ? "关闭" : "开启" }}短信服务
            </el-button>
            <el-button
              size="mini"
              type="primary"
              @click="deBounceWrap(handleToTest, row.server_type)"
            >
              手动检测
            </el-button>
            <el-button
              size="mini"
              type="warning"
              @click="deBounceWrap(handleToLog, row.server_type)"
            >
              日志查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-drawer
        title="服务测试数据"
        size="40%"
        :visible.sync="drawer"
        direction="rtl"
        :before-close="handleClose"
      >
        <json-viewer :value="testData" :expand-depth="5" copyable></json-viewer>
      </el-drawer>
    </el-card>
  </div>
</template>

<script>
import JsonViewer from "vue-json-viewer";

import {
  threeCheckStat,
  threeCheckSetClose,
  threeCheckManualTest
} from "@/api/config/thirdPartDetect";
import { NOOP } from "@/utils";

export default {
  name: "thirdPartDetect",
  components: {
    JsonViewer
  },
  data() {
    return {
      loading: false,

      tableData: [],

      /* 手动检测数据 */
      testData: {},

      /* 抽屉开关 */
      drawer: false
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.loading = true;
      threeCheckStat()
        .then(res => {
          const { data } = res;
          this.tableData = data;
        })
        .catch(NOOP)
        .finally(() => (this.loading = false));
    },

    handleToTest(type) {
      threeCheckManualTest(type)
        .then(res => {
          const { data } = res;
          this.testData = data;
          this.drawer = true;
        })
        .catch(NOOP);
    },
    handleClose(done) {
      done();
    },

    handleSwitchChange(row) {
      let { server_type, is_close } = row;
      is_close = is_close === 0 ? 1 : 0;
      let message =
        is_close === 0 ? "是否开启该应用短信服务" : "是否关闭该应用短信服务";

      this.$confirm(message, "信息服务", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          threeCheckSetClose(server_type, is_close).then(this.initData);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作"
          });
        });

      // this.$confirm('是否确定执行该操作！', '短信服务', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   callback: action => {
      //     let {server_type, is_close} = row
      //
      //     is_close = (is_close === 0 ? 1 : 0)
      //
      //     threeCheckSetClose(server_type, is_close).then(res => {
      //       const {data} = res
      //       this.tableData = data
      //       this.$message.success("设置成功！")
      //     })
      //   }
      // })
    },

    handleToLog(serverType) {
      this.$router.push({
        path: "/config/thirdPartDetectLog",
        query: { serverType }
      });
    },

    /* 检测对象是否是一个空对象 */
    isEmpty(obj) {
      if (Array.isArray(obj) && obj.length > 0) return true;
      if (typeof obj === "object" && Object.keys(obj).length > 0) return true;
      return false;
    }
  }
};
</script>

<style scoped></style>
